<template>
  <div class="query-box">
    <el-form class="query-form" :inline="true" v-model="form">
      <el-row>
        <el-form-item label="状态码">
          <el-select clearable filterable size="small" v-model="form.httpCode" placeholder="选择状态码">
            <el-option
            v-for="item in form.httpCodes"
            :key="item.code"
            :label="item.code"
            :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本">
          <el-select v-model="form.version" multiple filterable value-key="version" placeholder="请选择" size="small">
            <el-option 
            v-for="item in form.versions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备品牌">
          <el-select v-model="form.brand" multiple filterable value-key="brand" placeholder="请选择" size="small">
            <el-option 
            v-for="item in form.brands" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="URI">
          <el-input type="text" v-model="form.uri" clearable placeholder="请输入uri" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="会员卡号">
          <el-input type="text" v-model="form.carnumber" clearable placeholder="会员卡号" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input type="text" v-model="form.ip" clearable placeholder="请输入ip" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="响应时间">
          <el-input type="text" v-model="form.rptime" clearable placeholder="请输入响应时间" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker class="date-picker"
          size="small"
          v-model="form.dateSelect"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" :loading="false" @click="getPageList">查询</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table :data="pageList" style="width: 100%;" v-loading="isLoading">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="right" inline class="table-form-expand">
            <el-form-item>
              <label>服务端时间</label>
              <span>{{ props.row.serviceTime }}</span>
            </el-form-item>
            <el-form-item>
              <label>osId</label>
              <span v-if="props.row.osId === '1'">Android</span>
              <span v-else-if="props.row.osId === '2'">IOS</span>
              <span v-else-if="props.row.osId === '3'">H5</span>
              <span v-else>{{ props.row.osId }}</span>
            </el-form-item>
            <el-form-item>
              <label>响应状态码</label>
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item>
              <label>运行商</label>
              <span>{{ props.row.operator }}</span>
            </el-form-item>
            <el-form-item class="line-block">
              <label>原始内容</label>
              <span class="line-break">{{ props.row.content }}</span>
            </el-form-item>
            <el-form-item>
              <label>城市</label>
              <span>{{ props.row.city }}</span>
            </el-form-item>
            <el-form-item>
              <label>省份</label>
              <span>{{ props.row.province }}</span>
            </el-form-item>
            <el-form-item>
              <label>国家</label>
              <span>{{ props.row.nation }}</span>
            </el-form-item>
            <el-form-item>
              <label>客户端IP</label>
              <span>{{ props.row.iP }}</span>
            </el-form-item>
            <el-form-item>
              <label>客户端时间</label>
              <span>{{ props.row.time }}</span>
            </el-form-item>
            <el-form-item>
              <label>响应时间</label>
              <span>{{ props.row.responseTime }}</span>
            </el-form-item>
            <el-form-item>
              <label>返回大小</label>
              <span>{{ props.row.contentLength }}</span>
            </el-form-item>
            <el-form-item>
              <label>设备分辨率</label>
              <span>{{ props.row.screen }}</span>
            </el-form-item>
            <el-form-item>
              <label>操作系统版本</label>
              <span>{{ props.row.osVersion }}</span>
            </el-form-item>
            <el-form-item>
              <label>操作系统</label>
              <span>{{ props.row.os === '2' ? 'Android' : props.row.os }}</span>
            </el-form-item>
            <el-form-item>
              <label>网络类型</label>
              <span>{{ props.row.netType }}</span>
            </el-form-item>
            <el-form-item>
              <label>model</label>
              <span>{{ props.row.model }}</span>
            </el-form-item>
            <el-form-item>
              <label>设备型号</label>
              <span>{{ props.row.machineModel }}</span>
            </el-form-item>
            <el-form-item>
              <label>imei</label>
              <span>{{ props.row.imei }}</span>
            </el-form-item>
            <el-form-item>
              <label>设备id</label>
              <span>{{ props.row.deviceId }}</span>
            </el-form-item>
            <el-form-item>
              <label>设备品牌</label>
              <span>{{ props.row.brand }}</span>
            </el-form-item>
            <el-form-item class="line-block">
              <label>内核版本</label>
              <span class="line-break">{{ props.row.coreVersion }}</span>
            </el-form-item>
            <el-form-item>
              <label>页面相对路径</label>
              <span>{{ props.row.uRI }}</span>
            </el-form-item>
            <el-form-item>
              <label>应用id</label>
              <span>{{ props.row.appId }}</span>
            </el-form-item>
            <el-form-item>
              <label>应用版本</label>
              <span>{{ props.row.appVersion }}</span>
            </el-form-item>
            <el-form-item>
              <label>应用名称</label>
              <span>{{ props.row.appName }}</span>
            </el-form-item>
            <el-form-item>
              <label>dpid</label>
              <span>{{ props.row.dpid }}</span>
            </el-form-item>
            <el-form-item>
              <label>用户卡号</label>
              <span>{{ props.row.userID }}</span>
            </el-form-item>
          </el-form>
        </template> 
      </el-table-column>
      <el-table-column property="serviceTime" label="服务端时间" min-width="180" :formatter="formatTime"></el-table-column>
      <el-table-column property="osId" label="osId" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.osId === '1'">Andriod</span>
          <span v-else-if="scope.row.osId === '2'">IOS</span>
          <span v-else-if="scope.row.osId === '3'">H5</span>
          <span v-else>{{scope.row.osId}}</span>
        </template>
      </el-table-column>
      <el-table-column property="status" label="响应状态码" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '200'" class="bg_success">{{scope.row.status}}</span>
          <span v-else-if="/(^5[0-9]{2})|404/.test(scope.row.status) === true" class="bg_danger">{{scope.row.status}}</span>
          <span v-else>{{scope.row.status}}</span>
      </template>
      </el-table-column>
      <!-- <el-table-column property="content" label="原始内容" min-width="220" show-overflow-tooltip></el-table-column> -->
      <!-- <el-table-column label="原始内容" width="220">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p style="max-width:500px; word-break:break-all; word-wrap:break-word;">原始内容：{{ scope.row.content }}</p>
            <div slot="reference" class="name-wrapper">{{ scope.row.content.length > 25 ? scope.row.content.substring(0, 25 ) : scope.row.content }}</div>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column property="operator" label="运行商" min-width="100"></el-table-column>
      <el-table-column property="city" label="城市" min-width="80"></el-table-column>
      <el-table-column property="province" label="省份" min-width="80"></el-table-column>
      <el-table-column property="nation" label="国家" min-width="80"></el-table-column>
      <el-table-column property="iP" label="客户端IP" min-width="140"></el-table-column>
      <el-table-column property="time" label="客户端时间" min-width="180" :formatter="formatTime"></el-table-column>
      <!-- <el-table-column property="responseTime" label="响应时间" min-width="110"></el-table-column>
      <el-table-column property="contentLength" label="返回大小" min-width="80"></el-table-column>
      <el-table-column property="screen" label="设备分辨率" min-width="100"></el-table-column>
      <el-table-column property="osVersion" label="操作系统版本" min-width="110"></el-table-column>
      <el-table-column property="os" label="操作系统" min-width="80"></el-table-column>
      <el-table-column property="netType" label="网络类型" min-width="80"></el-table-column>
      <el-table-column property="model" label="model" min-width="70"></el-table-column>
      <el-table-column property="machineModel" label="设备型号" min-width="160"></el-table-column>
      <el-table-column property="imei" label="imei" min-width="180"></el-table-column>
      <el-table-column property="deviceId" label="设备id" min-width="170"></el-table-column>
      <el-table-column property="coreVersion" label="内核版本" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column property="brand" label="设备品牌" min-width="90"></el-table-column>
      <el-table-column property="uRI" label="页面相对路径" min-width="220" show-overflow-tooltip></el-table-column>
      <el-table-column property="appId" label="应用id" min-width="70"></el-table-column>
      <el-table-column property="appVersion" label="应用版本" min-width="80"></el-table-column>
      <el-table-column property="appName" label="应用名称" min-width="120"></el-table-column>
      <el-table-column property="dpid" label="dpid" min-width="300"></el-table-column>
      <el-table-column property="userId" label="用户卡号" min-width="120"></el-table-column> -->
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currPage"
      :page-sizes="[10, 20, 30, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>
  import moment from 'moment'

  export default {
    data () {
      return {
        form: {
          httpCode: '',
          httpCodes: [],
          platform: '',
          // platforms: platforms,
          platforms: [],
          platVersion: '',
          platVersions: [],
          version: '',
          versions: [],
          brand: '',
          brands: [],
          uri: '',
          carnumber: '',
          ip: '',
          rptime: '',
          dateSelect: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD HH:mm:ss')] // 数组，包括开始时间、结束时间
        },
        isLoading: false,
        pageList: [],
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      }
    },
    activated () {
      this.getCodeList()
      this.getAppVersions()
      this.getDeviceBrands()
      this.getPageList()
    },
    methods: {
      getCodeList () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/codes/getCodes'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.form.httpCodes = data.data
          }
        })
      },
      getAppVersions () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/crash/getAppVersion'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            data.data.map(item => {
              if (item !== null) {
                vm.form.versions.push({value: item, label: item})
              }
            })
          }
        })
      },
      getDeviceBrands () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/crash/getDeviceBrand'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.form.brands = data.data.map(item => {
              return {value: item, label: item}
            })
          }
        })
      },
      getPageList () {
        var vm = this

        vm.isLoading = true

        var params = []

        var httpCode = vm.form.httpCode
        if (httpCode !== null && httpCode !== '') {
          params.push('code=' + httpCode)
        }

        var version = vm.form.version
        if (JSON.stringify(version) !== '[]' && version !== null && version !== '') {
          params.push('version=' + version)
        }

        var brand = vm.form.brand
        if (JSON.stringify(brand) !== '[]' && brand !== null && brand !== '') {
          params.push('brand=' + brand)
        }

        var uri = vm.form.uri
        if (uri !== null && uri !== '') {
          params.push('uri=' + uri)
        }

        var carnumber = vm.form.carnumber
        if (carnumber !== null && carnumber !== '') {
          params.push('carnumber=' + carnumber)
        }

        var ip = vm.form.ip
        if (ip !== null && ip !== '') {
          params.push('ip=' + ip)
        }

        var rptime = vm.form.rptime
        if (rptime !== null && rptime !== '') {
          params.push('rptime=' + rptime)
        }

        if (vm.form.dateSelect !== null && vm.form.dateSelect !== '') {
          var startTime = vm.form.dateSelect[0]
          params.push('startTime=' + moment(startTime).format('YYYY-MM-DD HH:mm:ss'))

          var endTime = vm.form.dateSelect[1]
          params.push('endTime=' + moment(endTime).format('YYYY-MM-DD HH:mm:ss'))
        }

        if (vm.currPage !== null && vm.currPage !== '') {
          params.push('currPage=' + vm.currPage)
        }

        if (vm.pageSize !== null && vm.pageSize !== '') {
          params.push('pageSize=' + vm.pageSize)
        }

        var url = '/codes/getErrorCodeInfos'
        url += (params.length > 0 ? '?' + params.join('&') : '')
        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.pageList = data.data.list
            vm.totalCount = data.data.totalCount
            vm.isLoading = false
          }
        })
      },
      formatTime (row, column, cellValue, index) {
        if (cellValue !== null) {
          return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
        } else {
          return cellValue
        }
      },
      handleSizeChange (val) {
        var vm = this
        vm.pageSize = val
        vm.getPageList()
      },
      handleCurrentChange (val) {
        var vm = this
        vm.currPage = val
        vm.getPageList()
      }
    }
  }
</script>
<style scoped>
  .query-box .query-form{
    text-align: left;
    margin-bottom: 10px;
  }
  .query-box .el-button{
    padding: 8px 15px;
    font-size: 14px;
  }
  .query-box .table-form-expand{
    font-size: 0;
  }
  .query-box .table-form-expand label {
    display: inline-block;
    width: 110px;
    color: #99a9bf;
    text-align: right;
    font-size: 14px;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .query-box .table-form-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .query-box .table-form-expand .el-form-item.line-block{
    display: block;
    width: 100%;
  }
  .line-break{
    word-break:break-all;
    word-wrap:break-word
  }
  .query-box .bg_success{
    color: #fff;
    padding: 3px 5px;
    background: #00A65A;
  }
  .query-box .bg_danger{
    color: #fff;
    padding: 3px 5px;
    background: #DD4B39;
  }
</style>

